from Hackers and Slackers - Building Page Templates in ExpressJS With Handlebars

本篇筆記將解決以下問題：

• Handlebars 是什麼？
• 如何用 Handlebars 保留編輯頁面上的表單選項？
• 如何用 Handlebars 做出類似 {{#if (a === b)}} render something {{/if}} 的結果？
• 同樣的問題為何有人能找到答案，我卻不能？

誰適合閱讀：

• 想快速了解 Handlebars 的人
• 想迅速入門 Handlebars 進階使用技巧的人
• 想扎實提升解決問題能力的人

Handlebars 超快速入門

from SABE - Getting Started with Handlebars.js

Handlebars 是開發者們常使用的樣版引擎，不只能有效率地規劃網頁佈局，更在 HTML 基本結構上，增加了許多實用功能，協助我們迅速搭建畫面。

打造佈局與模板的樣版引擎

Line Today 網頁佈局示意圖 from Alpha Camp's material

仔細觀察各個網站，常常會發現同一個網站內的頁面，大多都有類似的外觀和版型，例如相同的導覽列及功能區塊等。目的是提高網頁規劃的效能，讓整個網站能共用同一個佈局的檔案，再把各頁面所需的內容填入即可。

而 handlebars 就扮演了統整佈局（layout）及局部樣版（partial template）的角色，就是 《全端開發者必懂的「產品搭建程序」》 提到的畫面中心（View）。

在 HTML 的架構上搭載實用方法

既然是畫面中心（View），就不只要呈現畫面外觀，更重要是能處理畫面渲染的邏輯。就像在瀏覽器提供了 DOM 讓我們能以 JavaScript 操作畫面，Express 也讓我們能在本地環境的伺服器中，藉模板引擎來操作畫面。

例如 {{#each}} 就是個常用功能，能讓我們在 view 使用迴圈，以大量產生結構類似的資料，像是清單、表格等：

<ul>
  {{#each todos}}
  <li>{{this.name}}</li>
  {{/each}}
</ul>

為什麼我的 Handlebars 跟別人的都不一樣？

from Bootstrap Form

雖然 Handlebars 已經搭載了許多實用功能，但在實作時卻發現仍舊有無法滿足的需求。我遇到最大的問題就是 「想在編輯頁面中，保留原本被選取的下拉選項」；卻發現 Handlebars 提供的 {{#if}} ，指能用在「當某變數有值或存在時，渲染包含的內容」。

如何用 Handlebars 保留編輯頁面上的表單選項？

而為了做出如上圖「保留編輯頁面上的餐點類型的原本選取的選項」，我試圖這麼做：

<select class="custom-select">
  <option value="">Open this select menu</option>
  <option value="1" {{#if (value === 1)}} selected {{/if}}>One</option>
  <option value="2" {{#if (value === 2)}} selected {{/if}}>Two</option>
  <option value="3" {{#if (value === 3)}} selected {{/if}}>Three</option>
</select>

然而，這顯然不管用⋯⋯

如何用 Handlebars 做出類似 {{#if (a === b)}} render something {{/if}} 的結果？

於是我開始用「handlebars compare with two values」等一系列的關鍵字去搜尋，光看第一個 stackoverflow 的結果條列就能明白，這是個蠻熱門的問題。

而通常這麼多人問的原因有兩個：

1. 問題極度常見，所以很多文章或提問。
2. 排名前幾的資源都無法解決問題，所以一問再問。

幸運的是，這個問題就屬於後者！簡言之，我大約分了兩天共數個小時，月讀這些相關資料，接著繼續用「文意類似」的關鍵字查詢，就是找不到可以用在 Express 環境下的 handlebars 解決方案。

用 handlebars-helper 的 {{#is}} 做出保留原始資料的好用表單

from Ember Igniter - How to do an "if equals" conditional comparison in Handlebars

直到隔天我在查到這篇文章後「靈機一動」——「雖然這篇用的是我不認識的 Ember.js 框架，但這個 handlebars-helpers 是什麼呢？」

於是我才在「handlebars-helpers + express」這兩個關鍵字的幫助下，找到了這兩個資源：

• handlebars-helpers npm 官方網站
• -Using handlebars-helpers with express-generator

裡面就有簡潔的安裝及設定教學，及 {{#is}} 的使用方式：

{{#is someVariable 'example'}}
THIS WILL BE RENDERED
{{/is}}

同樣的問題為何有人能找到答案，我卻不能？

費盡渾身精力、感到腦力耗竭後，不禁開始思考「同樣的問題為何有人能找到答案，我卻不能？而似乎還不止我找不到答案。」

在 light house 上，被同學提問「我是怎麼做到的」後，更加深我對於上述問題的反思。

專注在目的，而非手段

總結這段解決問題的歷程，我發現「突破關鍵在於聚焦在目的——也就是我要解決問題這件事上」；前面之所以會卡這麼久，是因為我帶著自以為的成見在找答案。我認為「應該可以這麼解吧」，所以關鍵字都圍繞在這個圈圈，難怪跨不進答案所在的資源中。

直到我轉念一想「也許這樣可行喔」，後面才迅速地解決問題！

用實戰鍛鍊解決問題力

這一期的課程中，我挑戰了蠻多教材中沒提供的技術、資源及方法，會在日後的實作筆記中一一揭露，並且我打算在最後彙整一篇《我如何鍛鍊解決問題的能力》，來總結「原來解決問題是這麼一回事啊！」

我才發現強大的「解決問題能力」，才是真正可以到處帶著走的硬實力，不管是不是軟體業或技術職，這都超級重要，只是在這些領域中，這個技能特別外顯罷了。

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。